<!-- 优惠券中心  -->
<template>
  <s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
    <s-tabs
      :list="tabMaps"
      @change="onTabsChange"
      v-model="state.currentTab"
    ></s-tabs>
    <s-empty
      v-if="state.pagination.total === 0"
      icon="/static/coupon-empty.png"
      text="暂无优惠券"
    ></s-empty>
    <template v-if="state.currentTab == 'all'">
      <view class="coupon-wrapper" v-for="item in state.pagination.data" :key="item.id">
        <s-coupon-list-user
          :data="item"
          @tap="
            onShowDetail({
              id: item.id,
            })
          "
        >
          <template #default>
            <button
              class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
              :class="item.get_status != 'can_get' ? 'border-btn' : ''"
              @click.stop="getBuy(item.id)"
              :disabled="item.get_status != 'can_get'"
            >
              {{ item.get_status_text }}
            </button>
          </template>
        </s-coupon-list-user>
      </view>
    </template>
    <template v-else>
      <view class="coupon-wrapper" v-for="item in state.pagination.data" :key="item.id">
        <s-coupon-list-user
          :data="item"
          type="user"
          @tap="
            onShowDetail({
              id: item.coupon_id,
              user_coupon_id: item.id,
            })
          "
        >
          <template #default>
            <button
              class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
              :class="
                item.status == 'can_get' || item.status == 'can_use'
                  ? ''
                  : item.status == 'used' || item.status == 'expired'
                    ? 'disabled-btn'
                    : 'border-btn'
              "
              :disabled="item.status != 'can_get' && item.status != 'can_use'"
              @click.stop="
                onShowDetail({
                  id: item.coupon_id,
                  user_coupon_id: item.id,
                })
              "
            >
              {{ item.status_text }}
            </button>
          </template>
        </s-coupon-list-user>
      </view>
    </template>

    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
    <su-popup :show="state.detailVisible" :showClose="true" type="center" round="10" title="优惠券详情" @close="state.detailVisible = false">
      <view class="popup-box" @tap.stop>
        <coupon-detail :id="state.detailId" :user_coupon_id="state.userCouponId" />
      </view>
    </su-popup>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import _ from 'lodash';
  import couponDetail from './detail-pc.vue';

  // 数据
  const pagination = {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
  };

  const state = reactive({
    detailVisible: false,
    detailId: 0,
    userCouponId: 0,
    currentTab: 'all',
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    loadStatus: '',
    type: '',
  });

  const tabMaps = [
    {
      name: '领券中心',
      value: 'all',
    },
    {
      name: '已领取',
      value: 'geted',
    },
    {
      name: '已使用',
      value: 'used',
    },
    {
      name: '已失效',
      value: 'expired',
    },
  ];

  const onShowDetail = (e) => {
    state.detailId = e.id;
    state.userCouponId = e.user_coupon_id;
    state.detailVisible = true;
  }

  function onTabsChange(e) {
    state.pagination = pagination;
    state.currentTab = e.value;
    state.type = e.value;
    if (state.currentTab == 'all') {
      getData();
    } else {
      getCoupon();
    }
  }
  async function getData(page = 1, list_rows = 5) {
    state.loadStatus = 'loading';
    const res = await sheep.$api.coupon.list({ list_rows, page });
    if (res.code === 1) {
      let couponlist = _.concat(state.pagination.data, res.data.data);
      state.pagination = {
        ...res.data,
        data: couponlist,
      };
      if (state.pagination.current_page < state.pagination.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
    }
  }

  async function getCoupon(page = 1, list_rows = 5) {
    state.loadStatus = 'loading';
    let res = await sheep.$api.coupon.userCoupon({
      type: state.type,
      list_rows,
      page,
    });
    if (res.code === 1) {
      let couponlist = _.concat(state.pagination.data, res.data.data);
      state.pagination = {
        ...res.data,
        data: couponlist,
      };
      if (state.pagination.current_page < state.pagination.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
    }
  }
  async function getBuy(id) {
    const { code, msg } = await sheep.$api.coupon.get(id);
    if (code === 1) {
      uni.showToast({
        title: msg,
      });
      setTimeout(() => {
        state.pagination = pagination;
        getData();
      }, 1000);
    }
  }

  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      if (state.currentTab == 'all') {
        getData(state.pagination.current_page + 1);
      } else {
        getCoupon(state.pagination.current_page + 1);
      }
    }
  }
  onLoad((Option) => {
    if (Option.type === 'all' || !Option.type) {
      getData();
    } else {
      state.type = Option.type;
      state.currentTab = Option.type;
      getCoupon();
    }
  });
  onReachBottom(() => {
    loadmore();
  });
</script>
<style lang="scss" scoped>
:deep(.page-body) {
  background-color: #fff !important;
}
  :deep(.s-tabs__wrapper__nav-item) {
    flex: none;
    font-size: 16px;
    height: 44px;
  }

.coupon-wrapper {
  width: 400px;
  background-color: $bg-page;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}

  .card-btn {
    // width: 144rpx;
    padding: 4px 10px;
    height: 28px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
  }
  .border-btn {
    background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
    color: #fff !important;
  }
  .disabled-btn {
    background: #cccccc;
    background-color: #cccccc !important;
    color: #fff !important;
  }

  .popup-box {
    width: 600px;
    left: 50%;
    max-height: 80vh;
    overflow: auto;
    border-radius: 10px;
  }
</style>
